@using Elsa.Dashboard.Extensions
@model WorkflowInstanceListViewModel
@{
    ViewBag.Title = "Workflow Instances";
    
    var deleteUrlTemplate = Url.Action("Delete", new { id = "id", returnUrl = Model.ReturnUrl }).Replace("id", "${id}");
}

@section FootScripts
{
    <script type="text/javascript">
        const form = document.querySelector('#listForm');
        
        function onDeleteClick(e, id){
            e.preventDefault();
            
            if(!confirm('Are you sure you want to delete this workflow instance?'))
                return;
            
            form.action = `@Html.Raw(deleteUrlTemplate)`;
            form.submit();
        }
    </script>
}

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">Workflow Instances</h3>
                            <a class="text-sm" asp-action="Edit" asp-controller="WorkflowDefinition" asp-route-id="@Model.WorkflowDefinition.DefinitionId">@Model.WorkflowDefinition.Name</a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <form id="listForm" method="post" class="table-wrapper">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Status</th>
                                <th scope="col">Version</th>
                                <th scope="col">Correlation ID</th>
                                <th scope="col">Started</th>
                                <th scope="col">Finished</th>
                                <th scope="col">Faulted</th>
                                <th scope="col">Aborted</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach (var item in Model.WorkflowInstances)
                            {
                                var workflowInstance = item.WorkflowInstance;
                                var statusClass = item.WorkflowInstance.Status.GetStatusClass();
                                
                                <tr>
                                    <td>
                                        <a asp-action="Details" asp-route-id="@workflowInstance.Id" asp-route-returnUrl="@($"{Context.Request.Path}{Context.Request.QueryString}")" class="mb-0 text-sm">@workflowInstance.Id</a>
                                    </td>
                                    <td>
                                        <span class="badge badge-dot mr-4">
                                            <i class=@statusClass></i>
                                            @workflowInstance.Status
                                        </span>
                                    </td>
                                    <td>@workflowInstance.Version</td>
                                    <td>@workflowInstance.CorrelationId</td>
                                    <td>@workflowInstance.StartedAt</td>
                                    <td>@workflowInstance.FinishedAt</td>
                                    <td>@workflowInstance.FaultedAt</td>
                                    <td>@workflowInstance.AbortedAt</td>
                                    <td class="text-right">
                                        <div class="dropdown">
                                            <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                <a class="dropdown-item" asp-action="Details" asp-route-id="@workflowInstance.Id">Details</a>
                                                <a class="dropdown-item" href="#" onclick="onDeleteClick(event, '@workflowInstance.Id')">Delete</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        <ul class="pagination justify-content-end mb-0">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">
                                    <i class="fas fa-angle-left"></i>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item active">
                                <a class="page-link" href="#">1</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">
                                    <i class="fas fa-angle-right"></i>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    @await Html.PartialAsync("Footer")
</div>